<template>
  <div class="libaryWrapper">
    <!-- <form-box :fields="seachConfig" :isFilter="true" :submitHandle="(val) => getList({ ...vals, pageNum: 1 })" :submitting="loading"></form-box> -->
    <div class="flex-line">
      <el-select v-model="filter.groupId" placeholder="请选择" class="mr-20">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="filter.keyword"
        class="mr-20"
        placeholder="请输入课程名称"
        clearable
        style="width: 200px"
      />
      <el-button
        class="gradientVertical"
        size="large"
        round
        @click="searchFun()"
      >搜索</el-button>
    </div>
    <el-row v-loading="loading" :gutter="20">
      <el-col v-for="item in list" :key="item.id" :span="6">
        <div class="mediaBox">
          <div class="media">
            <img :src="item.imageUrl">
            <span
              v-if="item.type === 'video'"
            ><i
              class="el-icon-caret-right"
            /></span>
          </div>
          <div class="detail">
            <h3>{{ item.title }}</h3>
            <p>{{ item.detail }}</p>
          </div>
          <footer>
            <avatar-group :size="30" :list="item.students || []" />
            <el-button
              class="gradientVertical"
              size="large"
              @click="playFun(item)"
            >开始学习</el-button>
          </footer>
        </div>
      </el-col>
    </el-row>
    <empty v-if="!loading && list.length <= 0" />
    <Pagination
      :total="pagination.total"
      :page-num="pagination.pageNum"
      :page-size="pagination.pageSize"
      @paginationFun="paginationFun"
    />
  </div>
</template>
<script>
import { getCourseList, courseGroupsReuqest } from './api'
// import AImage from '@/components/Basic/Image'
import AvatarGroup from '@/components/Basic/AvatarGroup'
import { mapGetters } from 'vuex'
// import IPagination from '@/components/Basic/Pagination'
import { seachConfig } from './config'
import Pagination from '@/components/Basic/PaginationTwo'
export default {
  components: {
    // AImage,
    AvatarGroup,
    Pagination
  },
  data () {
    return {
      loading: false,
      list: [],
      pagination: {
        total: 0,
        pageSize: 12,
        pageNum: 1
      },
      filterData: {},
      seachConfig,
      addObj: {
        visible: false,
        id: '',
        type: ''
      },
      myVisible: false,
      options: [],
      filter: {
        groupId: '',
        keyword: ''
      }
    }
  },
  computed: {
    ...mapGetters(['curArea'])
  },
  async created () {
    await this.getGroupFun()
    await this.getList()
  },
  methods: {
    playFun (playUrl) {
      console.log(playUrl)
      window.open(playUrl.url)
    },

    searchFun () {
      this.pagination.pageNum = 1
      this.getList()
    },
    getGroupFun () {
      return new Promise((resolve, reject) => {
        courseGroupsReuqest({}).then((res) => {
          res.map((item) => {
            const obj = {
              value: item.groupId,
              label: item.title
            }
            this.options.push(obj)
            this.filter.groupId = this.options[0].value
            resolve()
          })
        })
      })
    },
    getList () {
      this.loading = true
      const prams = {
        pageNum: this.pagination.pageNum - 1,
        pageSize: this.pagination.pageSize,
        ...this.filter
      }
      return new Promise((resolve, reject) => {
        getCourseList(prams)
          .then((res) => {
            this.loading = false
            this.pagination.total = res.total
            this.list = res.content
          })
          .finally(() => {
            this.loading = false
          })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mediaBox {
  margin-top: 20px;
  .media {
    position: relative;
    height: 230px;

    > img {
      width: 100%;
      height: 100%;
    }

    > span {
      position: absolute;
      display: inline-block;
      width: 60px;
      height: 60px;
      line-height: 84px;
      text-align: center;
      left: 50%;
      top: 50%;
      border-radius: 30px;
      margin-top: -30px;
      margin-left: -30px;
      background: rgba(0, 0, 0, 0.7);
      text-align: center;

      i {
        color: #fff;
        font-size: 40px;
      }
    }
  }

  .detail {
    margin-top: 20px;

    h3 {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #000000;
      text-align: left;
      font-style: normal;
      text-transform: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 10px;
    }

    p {
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 1.5;
    }
  }

  footer {
    margin-top: 10px;

    .gradientBtn {
      height: 40px;
    }
  }
}
</style>
